<template>
  <div :style="style">
    <el-card class="title">
      <template #header>
        <div class="card-header">
          <span> {{ title || '表单' }}</span>
        </div>
      </template>
      <el-alert :title="description" type="info" show-icon :closable="false" />
    </el-card>
    <el-card>
      <epx-form v-bind="$attrs" v-model="value" @submit="onSubmit" />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
  import EpxForm from '../components/form/EpxForm.vue';
  import { Row } from '../components/elementUI';
  import { ref } from 'vue';
  import { Command } from '../components/core';

  const props = defineProps<{
    title?: string;
    description?: string;
    row?: Row;
    submit: string;
    style: unknown;
  }>();

  const emit = defineEmits(['command']);

  const value = ref<Row>({
    ...props.row
  });

  const onSubmit = async () => {
    const r = await Command.Post(props.submit, value.value);
    if (r) emit('command', r);
  };
</script>

<script lang="ts">
  // 声明额外的选项
  export default {
    inheritAttrs: false
  };
</script>

<style scoped>
  .title {
    margin-bottom: 15px;
  }

  .card-header {
    display: flex;
    justify-content: left;
    align-items: center;
  }
</style>
